<template>
  <div class="set">
    <div class="contentDiv">
      <div class="searchDiv">
        <div>
          <el-tabs v-model="activeName1" @tab-click="handleClick">
            <el-tab-pane label="用户管理" name="fourth"></el-tab-pane>
            <el-tab-pane label="告警规则" name="first"></el-tab-pane>
            <el-tab-pane label="日志管理" name="second"></el-tab-pane>

          </el-tabs>
        </div>
        <div class="waringStyle"  v-show="activeName1 === 'first'">
          <el-button class="ml5" type="primary" plain @click="showDialog('告警规则')">新建</el-button>
<!--          <el-button class="ml5" type="primary" plain @click="showDialog('出库')">出库任务</el-button>-->
<!--          <el-button class="ml5" type="primary" plain @click="taizhang">导出台账报表</el-button>-->
        </div>
        <div class="waringStyle"  v-show="activeName1 === 'second'">
          <el-button class="ml5" type="primary" plain @click="taizhang">导出</el-button>
        </div>
        <div class="waringStyle"  v-show="activeName1 === 'fourth'">
          <el-button class="ml5" type="primary" plain @click="showDialogShop()">新建</el-button>
        </div>
      </div>
      <div class="tableList">
        <div v-show="activeName1 === 'first'">
          <div class="divSelect">
            <p>告警规则</p>
<!--            <div>-->
<!--              <el-select v-model="value" filterable placeholder="请选择仓库" style="width: 12rem;" @change="handleSelectChange" >-->
<!--                <el-option-->
<!--                  v-for="item in options"-->
<!--                  :key="item.value"-->
<!--                  :label="item.label"-->
<!--                  :value="item.value">-->
<!--                </el-option>-->
<!--              </el-select>-->
<!--              <el-select class="ml5" v-model="value" filterable placeholder="请选择耗材类型" style="width: 12rem;" @change="handleSelectChange">-->
<!--                <el-option-->
<!--                  v-for="item in options"-->
<!--                  :key="item.value"-->
<!--                  :label="item.label"-->
<!--                  :value="item.value">-->
<!--                </el-option>-->
<!--              </el-select>-->
<!--              <el-select class="ml5" v-model="value" filterable placeholder="请选择站点名称" style="width: 12rem;" @change="handleSelectChange">-->
<!--                <el-option-->
<!--                  v-for="item in options"-->
<!--                  :key="item.value"-->
<!--                  :label="item.label"-->
<!--                  :value="item.value">-->
<!--                </el-option>-->
<!--              </el-select>-->
<!--              <el-button class="ml5" type="primary" plain @click="searchList">搜索</el-button>-->

<!--            </div>-->
          </div>
          <el-table :data="tableData1"   :header-cell-style="{ 'background-color': 'transparent' }" >
            <el-table-column property="xh" label="序号"  width="100"></el-table-column>
            <el-table-column property="name" label="设备名称" ></el-table-column>
            <el-table-column property="leixing" label="设备类型" ></el-table-column>
            <el-table-column property="usedate" label="设备使用时间" ></el-table-column>
            <el-table-column property="waringdate" label="告警时间"></el-table-column>
            <el-table-column property="waringji" label="告警等级"></el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template #default="scope">
                <el-button
                  type="primary"
                  size="small"
                  @click="handleUpdate('waringEdit',scope.$index, scope.row)"
                >修改</el-button>
                <el-button
                  type="danger"
                  size="small"
                  @click="delUpdate('waringDel',scope.$index, scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div v-show="activeName1 === 'second'">
          <div class="divSelect">
            <p>日志管理</p>
<!--            <div class="bsearchDiv">-->
<!--              <span>位置:</span>-->
<!--              <el-select v-model="value" filterable placeholder="全部站点" style="width: 12rem;" @change="handleSelectChange" >-->
<!--                <el-option-->
<!--                  v-for="item in options"-->
<!--                  :key="item.value"-->
<!--                  :label="item.label"-->
<!--                  :value="item.value">-->
<!--                </el-option>-->
<!--              </el-select>-->
<!--              <span class="ml5">设备类型:</span>-->
<!--              <el-select class="ml5" v-model="value" filterable placeholder="请选择设备类型" style="width: 12rem;" @change="handleSelectChange">-->
<!--                <el-option-->
<!--                  v-for="item in options"-->
<!--                  :key="item.value"-->
<!--                  :label="item.label"-->
<!--                  :value="item.value">-->
<!--                </el-option>-->
<!--              </el-select>-->
<!--              <el-input class="ml5" v-model="value"  prefix-icon="el-icon-search" placeholder="模糊搜索"  style="width: 12rem;"></el-input>-->
<!--              <el-button class="ml5" type="primary" plain @click="searchList">搜索</el-button>-->

<!--            </div>-->
          </div>
          <el-table :data="tableData2"   :header-cell-style="{ 'background-color': 'transparent' }" >
            <el-table-column property="xh" label="序号"   width="100"></el-table-column>
            <el-table-column property="mingcheng" label="登录账号" ></el-table-column>
            <el-table-column property="bianhao" label="姓名" ></el-table-column>
            <el-table-column property="changjia" label="日志内容" ></el-table-column>
            <el-table-column property="xinghao" label="IP" ></el-table-column>
            <el-table-column property="anDate" label="创建时间"></el-table-column>
            <el-table-column property="zhandian" label="操作内容"></el-table-column>
<!--            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">-->
<!--              <template slot-scope="scope">-->
<!--                <el-button-->

<!--                  type="text"-->
<!--                  @click="handleUpdate('online',scope.row)"-->
<!--                >查看详情</el-button>-->
<!--              </template>-->
<!--            </el-table-column>-->
          </el-table>
        </div>
        <div v-show="activeName1 === 'fourth'">
          <div class="divSelect">
            <p style="width: 12rem;">{{gongyingshangname}}</p>
            <div class="bsearchDiv">
              <el-button class="ml5" type="primary" plain @click="gongfunction('gong','用户管理')">用户管理</el-button>
              <el-button class="ml5" type="primary" plain @click="gongfunction('gongshop','角色管理')">角色管理</el-button>
            </div>
          </div>
          <el-table v-show="gongyingshang === 'gong'" :data="tableData4"   :header-cell-style="{ 'background-color': 'transparent' }" >
            <el-table-column property="xh" label="序号"  width="100"></el-table-column>
            <el-table-column property="name" label="姓名" ></el-table-column>
            <el-table-column property="phone" label="手机号" ></el-table-column>
            <el-table-column property="gangwei" label="岗位" ></el-table-column>
            <el-table-column property="role" label="角色"></el-table-column>
            <el-table-column property="workDate" label="入职时间"></el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template #default="scope" >
                <el-button
                  type="primary"
                  size="small"
                  @click="handleUpdate('gong',scope.$index, scope.row)"
                >修改</el-button>
                <el-button
                  type="danger"
                  size="small"
                  @click="delUpdate('gong',scope.$index, scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-table v-show="gongyingshang === 'gongshop'" :data="tableData5"   :header-cell-style="{ 'background-color': 'transparent' }" >
            <el-table-column property="xh" label="角色编号"  width="100"></el-table-column>
            <el-table-column property="role" label="角色名称" ></el-table-column>
            <el-table-column property="quanxian" label="权限字符" ></el-table-column>
            <el-table-column property="sortnum" label="显示顺序" ></el-table-column>
            <el-table-column property="status" label="状态" ></el-table-column>
            <el-table-column property="createdate" label="创建时间" ></el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template #default="scope" >
                <el-button
                  type="primary"
                  size="small"
                  @click="handleUpdate('gongshop',scope.$index, scope.row)"
                >修改</el-button>
                <el-button
                  type="danger"
                  size="small"
                  @click="delUpdate('gongshop',scope.$index, scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <pagination
          background
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>

    <!--    详情-->
    <div class="h100"  v-show="dialogTableVisible">
      <div class="tanDiv"></div>
      <div  class="diaStyle">
        <div class="export">
          <!--          <el-button type="primary" @click="exportExcel">导出</el-button>-->
        </div>
        <div class="xx" @click="hiddenTan"><img src="../../assets/images/xx.png" alt="" ></div>
        <div v-show="activeName1 === 'first'" class="warningContent">
          <div class="wt">
            <span>出入库记录</span>
            <div class="waringStyle">
              <el-date-picker
                v-model="valueDatechu"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </div>
          </div>
          <div>
            <!--  出入库记录-->
            <div class="mt10">
              <el-table :data="tableHis"  ref="tableHistory" :header-cell-style="{ 'background-color': 'transparent' }" >
                <el-table-column property="xh" label="序号"  width="100"></el-table-column>
                <el-table-column property="station" label="库房编号" ></el-table-column>
                <el-table-column property="content" label="设备名称" ></el-table-column>
                <el-table-column property="person" label="设备型号" ></el-table-column>
                <el-table-column property="waringDate" label="资源类型"></el-table-column>
                <el-table-column property="waringDate" label="数量"></el-table-column>
                <el-table-column property="waringDate" label="剩余库存"></el-table-column>
                <el-table-column property="waringDate" label="仓库名称"></el-table-column>
                <el-table-column property="waringDate" label="出入库人员"></el-table-column>
                <el-table-column property="waringDate" label="出入库时间"></el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <div v-show="activeName1 === 'second'" class="warningContent">
          <div class="wt"><span>设备详情</span></div>
          <div class="wb">
            <div class="baseSession">
              <div class="imgDiv">
                <img src="../../assets/images/shebei.png" alt="">
              </div>
              <div class="rowDiv">
                <el-row>
                  <el-col :span="12">
                    <div class="grid-content bg-purple">

                      <span>调度位置：</span>
                      <span>{{form.station}}</span>


                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="grid-content bg-purple-light">
                      <span>调度内容：</span>
                      <span>{{form.content}}</span>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <div class="grid-content bg-purple">

                      <span>级别：</span>
                      <span>{{form.waringji}}</span>


                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="grid-content bg-purple-light">
                      <span>携带耗材：</span>
                      <span>{{form.waringtype}}</span>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <div class="grid-content bg-purple">

                      <span>运营车辆：</span>
                      <span>{{form.waringshe}}</span>


                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="grid-content bg-purple-light">
                      <span>任务路线：</span>
                      <span>{{form.waringyuan}}</span>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
            <div class="mt10">

              <el-tabs v-model="activeTab" @tab-click="handleClickTan">
                <el-tab-pane label="维修记录" name="first">
                  <el-table :data="tableHis"  ref="tableHistory" :header-cell-style="{ 'background-color': 'transparent' }" >
                    <el-table-column property="xh" label="序号"  width="100"></el-table-column>
                    <el-table-column property="station" label="提交时间" ></el-table-column>
                    <el-table-column property="content" label="紧急程度" ></el-table-column>
                    <el-table-column property="person" label="维修结果说明" ></el-table-column>
                    <el-table-column property="waringDate" label="执行人"></el-table-column>
                  </el-table>
                </el-tab-pane>
                <el-tab-pane label="告警记录" name="second">
                  <el-table :data="tableHis"  ref="tableHistory" :header-cell-style="{ 'background-color': 'transparent' }" >
                    <el-table-column property="xh" label="序号"  width="100"></el-table-column>
                    <el-table-column property="station" label="告警时间" ></el-table-column>
                    <el-table-column property="content" label="告警级别" ></el-table-column>
                    <el-table-column property="person" label="告警原因" ></el-table-column>
                    <el-table-column property="waringDate" label="执行人"></el-table-column>
                  </el-table>
                </el-tab-pane>

              </el-tabs>



            </div>
          </div>
        </div>
        <div v-show="activeName1 === 'third'" class="warningContent1">
          <div class="wt"><span>采购详情</span></div>
          <div class="wb">
            <div class="baseSession">
              <el-row>
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <span>状态：</span>
                    <span>{{form.station}}</span>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content bg-purple-light">
                    <span>执行时间：</span>
                    <span>{{form.content}}</span>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content bg-purple-light">
                    <span>执行人：</span>
                    <span>{{form.content}}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <span>申请人：</span>
                    <span>{{form.station}}</span>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content bg-purple-light">
                    <span>采购编号：</span>
                    <span>{{form.content}}</span>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content bg-purple-light">
                    <span>申请时间：</span>
                    <span>{{form.content}}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <span>组织部门：</span>
                    <span>{{form.station}}</span>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content bg-purple-light">
                    <span>设备编号：</span>
                    <span>{{form.content}}</span>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content bg-purple-light">
                    <span>业务事由：</span>
                    <span>{{form.content}}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <div class="grid-content bg-purple-light">
                    <span>设备名称：</span>
                    <span>{{form.content}}</span>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content bg-purple-light">
                    <span>单价（元）：</span>
                    <span>{{form.content}}</span>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <span>总金额：</span>
                    <span>{{form.station}}</span>
                  </div>
                </el-col>


              </el-row>
              <el-row>
                <el-col :span="8">
                  <div class="grid-content bg-purple-light">
                    <span>供应商名称：</span>
                    <span>{{form.content}}</span>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content bg-purple-light">
                    <span>供应商电话：</span>
                    <span>{{form.content}}</span>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <span>备注：</span>
                    <span>{{form.station}}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <div class="grid-content bg-purple-light">
                    <span>审批单：</span>
                    <img src="../../assets/images/shebei.png" alt="">
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
        <div v-show="activeName1 === 'fourth'" class="warningContent">
          <div class="wt"><span>设备详情</span></div>
          <div>
            <div class="baseSession">
              <el-row>
                <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <span>设备名称：</span>
                    <span>{{form.station}}</span>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple-light">
                    <span>设备地点：</span>
                    <span>{{form.content}}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <div class="grid-content bg-purple">

                    <span>设备编号：</span>
                    <span>{{form.waringji}}</span>


                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple-light">
                    <span>设备厂家：</span>
                    <span>{{form.waringtype}}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <div class="grid-content bg-purple">

                    <span>设备状态：</span>
                    <span>{{form.waringshe}}</span>


                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple-light">
                    <span>设备厂家联系电话：</span>
                    <span>{{form.waringyuan}}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <div class="grid-content bg-purple">

                    <span>运行开始时间：</span>
                    <span>{{form.waringdate}}</span>


                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple-light">
                    <!--                    <span>告警状态：</span>-->
                    <!--                    <span>{{form.status}}</span>-->
                  </div>
                </el-col>
              </el-row>
            </div>
            <div class="mt10">
              <el-table :data="tableHis"  ref="tableHistory" :header-cell-style="{ 'background-color': 'transparent' }" >
                <el-table-column property="xh" label="序号"  width="100"></el-table-column>
                <el-table-column property="station" label="故障时间" ></el-table-column>
                <el-table-column property="content" label="故障原因" ></el-table-column>
                <el-table-column property="person" label="处理人" ></el-table-column>
                <el-table-column property="waringDate" label="联系电话"></el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--    入库出库 弹框   新建    采购单展示 -->
    <div class="h101"  v-show="dialogRcu">
      <div class="tanDiv"></div>
      <div  class="diaStyle">
        <div class="export">
          <!--          <el-button type="primary" @click="exportExcel">导出</el-button>-->
        </div>
        <div class="xx" @click="hiddenTan"><img src="../../assets/images/xx.png" alt="" ></div>

        <div v-show="currentTask === '告警规则'"  class="warningContent">
          <div class="wt">  <span class="suxian"></span> <span class="ml5">{{ waringTitle }}</span></div>
          <div class="wb">
            <div class="baseSession" style="padding: 2rem;">
              <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                <el-row :gutter="40">
                  <el-col :span="12">
                    <el-form-item label="设备名称" prop="name">
                      <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="设备类型" prop="name">
                      <el-select v-model="ruleForm.name" placeholder="请选择资源类型" >
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="40">
                  <el-col :span="12">
                    <el-form-item label="告警单位" prop="name">
                      <el-select v-model="ruleForm.name" placeholder="请选择资源类型">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="告警时间" prop="name">
                      <el-date-picker
                        v-model="ruleForm.name"
                        type="datetime"
                        placeholder="选择告警时间">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="40">
                  <el-col :span="12">
                    <el-form-item label="告警节点" prop="name">
                      <el-select v-model="ruleForm.name" placeholder="请选择告警节点" >
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="告警等级" prop="name">
                      <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item>
                  <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
                  <el-button @click="resetForm('ruleForm')">取消</el-button>
                </el-form-item>

              </el-form>

            </div>
          </div>
        </div>
        <div v-show="currentTask === '出库'" class="warningContent">
          <div class="wt"><span class="suxian"></span> <span class="ml5">出库任务</span></div>
          <div class="wb">
            <div class="baseSession">
              <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="资源类型" prop="name">
                      <el-select v-model="ruleForm.name" placeholder="请选择资源类型" style="width: 12rem;">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="设备编号" prop="name">
                      <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="设备名称" prop="name">
                      <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="设备型号" prop="name">
                      <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="单位" prop="name">
                      <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="出库时间" prop="name">
                      <el-date-picker
                        v-model="ruleForm.name"
                        type="datetime"
                        placeholder="选择日期时间">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="仓库名称" prop="name">
                      <el-select v-model="ruleForm.name" placeholder="请选择入库仓库" style="width: 12rem;">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="出库数量" prop="name">
                      <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="入库编号" prop="name">
                      <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="单价(元)" prop="name">
                      <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="领用人" prop="name">
                      <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">

                  </el-col>
                </el-row>

                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-form-item label="备注" prop="name">
                      <el-input type="textarea" v-model="ruleForm.desc"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item>
                  <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
                  <el-button @click="resetForm('ruleForm')">取消</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>

        <div v-show="currentTask === '采购新建'" class="warningContent">
          <div class="wt"><span class="suxian"></span> <span class="ml5">新建采购单</span></div>
          <div class="wb">
            <div class="baseSession">
              <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="采购编号" prop="name">
                      <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="业务事由" prop="name">
                      <el-select v-model="ruleForm.name" placeholder="请选择业务事由" style="width: 12rem;">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="资源类型" prop="name">
                      <el-select v-model="ruleForm.name" placeholder="请选择资源类型" style="width: 12rem;">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="设备编号" prop="name">
                      <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="设备名称" prop="name">
                      <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="供应商名称" prop="name">
                      <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="数量" prop="name">
                      <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="单价（元）" prop="name">
                      <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="总金额" prop="name">
                      <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-form-item label="备注" prop="name">
                      <el-input type="textarea" v-model="ruleForm.desc"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-form-item label="采购审批单" prop="name">
                      <el-upload
                        class="avatar-uploader"
                        action="/uploadUrl"
                        :show-file-list="false"
                        :on-success="handleSuccess"
                        :before-upload="beforeUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                      </el-upload>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item>
                  <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
                  <el-button @click="resetForm('ruleForm')">取消</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
        <div v-show="currentTask === '新建用户'" class="warningContent">
          <div class="wt"><span class="suxian"></span> <span class="ml5">{{ titleName }}</span></div>
          <div class="wb">
            <div class="baseSession" style="padding: 4rem 2rem;">
              <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="用户名" prop="name">
                      <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="岗位" prop="name">
                      <el-select v-model="ruleForm.name" placeholder="请选择岗位">
                        <el-option label="普通工人" value="shanghai"></el-option>
                        <el-option label="技术岗位" value="beijing"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>

                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="职位" prop="name">
                      <el-select v-model="ruleForm.name" placeholder="请选择职位">
                        <el-option label="技术员" value="shanghai"></el-option>
                        <el-option label="站点人员" value="beijing"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="联系人电话" prop="context">
                      <el-input v-model="ruleForm.context"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="角色" prop="status">
                      <el-select v-model="ruleForm.status" placeholder="请选择角色">
                        <el-option label="管理员" value="shanghai"></el-option>
                        <el-option label="普通角色" value="beijing"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="入职时间" prop="phone">
                      <el-date-picker
                        v-model="ruleForm.date"
                        type="date"
                        placeholder="选择日期时间">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>

                </el-row>

                <el-form-item>
                  <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
                  <el-button @click="resetForm('ruleForm')">取消</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
        <div v-show="currentTask === '新建角色'" class="warningContent">
          <div class="wt"><span class="suxian"></span> <span class="ml5">{{ titleJue }}</span></div>
          <div class="wb">
            <div class="baseSession" style="padding: 4rem 2rem;">
              <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="角色名称" prop="name">
                      <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="权限字符" prop="name">
                      <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                  </el-col>

                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="角色序号" prop="context">
                      <el-input v-model="ruleForm.context"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="角色状态" prop="context">
                      <el-radio-group v-model="ruleForm.resource">
                        <el-radio label="正常"></el-radio>
                        <el-radio label="停用"></el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="菜单权限" prop="phone">
                      <el-input v-model="ruleForm.phone"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="数据权限" prop="phone">
                      <el-input v-model="ruleForm.phone"></el-input>
                    </el-form-item>
                  </el-col>

                </el-row>

                <el-form-item>
                  <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
                  <el-button @click="resetForm('ruleForm')">取消</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>

      </div>
    </div>
    <!-- 设置预警保留 -->
    <div class="h102"  v-show="shezhiDiv">
      <div class="tanDiv"></div>
      <div  class="diaStyle">
        <div class="xx" @click="hiddenTan"><img src="../../assets/images/xx.png" alt="" ></div>
        <div  class="warningContent">
          <div class="wt">  <span class="suxian"></span> <span class="ml5">删除用户</span></div>
          <div class="wb">
            <div class="baseSession" style="height:8rem;display: flex;align-items: center">
              <span style="display: inline-block;width: 100%;text-align: center;">确认删除当前<span><  {{ delUser }} ></span> ？</span>
            </div>
            <div style="text-align: center;">
              <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
              <el-button @click="resetForm('ruleForm')">取消</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: "total",
  data() {
    return {
      dialogTableVisible:false,
      dialogRcu:false, //入库出库
      shezhiDiv:false, //入库出库
      currentTask:'',
      titleName:'新建用户',
      titleJue:'新建角色',
      delUser:'',
      valueDatechu:'', //出入库时间搜索
      activeTab:'first',
      gongyingshang:'gong',
      gongyingshangname:'用户管理',
      waringTitle:'新建告警规则',
      tableData1:[
        {
          xh:1,
          name:'消毒液',
          leixing:'耗材类',
          usedate:'35h',
          waringdate:'严重告警',
          waringjie:'100ml',
          waringji:'2024-3-30'

        },{
          xh:2,
          name:'消毒液',
          leixing:'耗材类',
          usedate:'35h',
          waringdate:'严重告警',
          waringjie:'100ml',
          waringji:'2024-3-30'

        },{
          xh:3,
          name:'消毒液',
          leixing:'耗材类',
          usedate:'35h',
          waringdate:'严重告警',
          waringjie:'100ml',
          waringji:'2024-3-30'

        },


      ],
      tableData2:[
        {
          xh:1,
          mingcheng:'摄像头1',
          bianhao:'信号断开',
          changjia:'西门子',
          xinghao:'xh001',
          anDate:'2024-3-30',
          zhandian:'梁家务村处理站'
        },
        {
          xh:2,
          mingcheng:'摄像头2',
          bianhao:'信号断开',
          changjia:'西门子',
          xinghao:'xh001',
          anDate:'2024-3-30',
          zhandian:'梁家务村处理站'
        },

      ],
      tableData3:[
        {
          xh:1,
          shiyou:'梁家务村处理站',
          bianhao:'23312121',
          person:'小杜 工号9527',
          dep:'物业部',
          number:'12',
          mingcheng:'垃圾桶',
          total:'2000',
          caiDate:'2024-3-30',

        },

      ],
      tableData4:[
        {
          xh:1,
          name:'汤俊',
          phone:'134620133243',
          gangwei:'站长',
          role:'站点管理员',
          workDate:'2024-3-30'

        }, {
          xh:2,
          name:'业光',
          phone:'134620133243',
          gangwei:'站长',
          role:'站点管理员',
          workDate:'2024-3-30'

        }, {
          xh:3,
          name:'袁畅',
          phone:'134620133243',
          gangwei:'站长',
          role:'站点管理员',
          workDate:'2024-3-30'

        },

      ],
      tableData5:[
        {
          xh:1,
          role:'超级管理员',
          quanxian:'admin',
          sortnum:'1',
          status:'正常',
          createdate:'2024-3-30'

        },{
          xh:2,
          role:'超级管理员',
          quanxian:'admin',
          sortnum:'1',
          status:'正常',
          createdate:'2024-3-30'

        },{
          xh:3,
          role:'超级管理员',
          quanxian:'admin',
          sortnum:'1',
          status:'正常',
          createdate:'2024-3-30'

        },

      ],
      waringValue:'',
      // 总条数
      total: 10,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        valueDate: null,
      },
      activeName1:'fourth',
      form:{
        waringji:'严重告警',
        station:'梁家务村处理站',
        content:'更换xxxx',
        waringtype:'耗材告警',
        waringshe:'垃圾桶',
        waringyuan:'xx',
        waringdate:'2024-01-01',
        status:'已自动派单',
      },
      tableHis:[{
        xh:1,
        station:'梁家务村处理站',
        content:'信号断开',
        person:'小杜 工号9527',
        waringDate:'2024-3-30',
      }],
      kaoqinDate:'',
      ruleForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        date1: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        date2: [
          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
        ],
        type: [
          { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
        ],
        resource: [
          { required: true, message: '请选择活动资源', trigger: 'change' }
        ],
        desc: [
          { required: true, message: '请填写活动形式', trigger: 'blur' }
        ]
      },
      imageUrl: '', // 用于显示已上传的图片
    };
  },
  mounted() {

  },
  methods: {
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 查询信息列表 */
    getList() {
      this.loading = true;
      listCkxx(this.queryParams).then(response => {
        this.tableData = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    //搜索下拉选择事件
    handleSelectChange(value) {
      // 处理选择变化的逻辑，这里的 value 参数就是用户选择的值
      console.log('选择的值：', value);
    },
    //弹框点击展示对应table
    handleClick(tab, event) {
      switch (tab.name) {
        case 'first':
          // this.getList1();
          break;
        case 'second':
          // this.getList2();
          break;
        case 'third':
          // this.getList3();
          break;
        case 'fourth':
          // this.getList4();
          break;
        default:
          break;
      }
    },

    //弹框点击展示对应table
    handleClickTan(tab, event) {
      switch (tab.name) {
        case 'first':
          // this.getList1();
          break;
        case 'second':
          // this.getList2();
          break;
        default:
          break;
      }
    },
    //入库  出库
    showDialog(task,b) {
      this.currentTask = task;
      this.dialogRcu = true;
      // 在这里可以根据任务类型加载对应的图表数据并渲染图表
      // 例如，使用 ECharts 渲染图表的代码
      // if (task === '入库') {
      //   this.renderRukuEchart(); // 渲染入库任务的图表
      // } else if (task === '出库') {
      //   this.renderChukuEchart(); // 渲染出库任务的图表
      // }
    },

    //新建供应商
    showDialogShop() {
      if(this.gongyingshang == 'gong'){
        this.currentTask = '新建用户';
      }else{
        this.currentTask = '新建角色';
      }

      this.dialogRcu = true;
      // 在这里可以根据任务类型加载对应的图表数据并渲染图表
      // 例如，使用 ECharts 渲染图表的代码
      // if (task === '入库') {
      //   this.renderRukuEchart(); // 渲染入库任务的图表
      // } else if (task === '出库') {
      //   this.renderChukuEchart(); // 渲染出库任务的图表
      // }
    },
    //设置
    shezhi(aaa) {
      this.shezhiDiv = true;
      // 在这里可以根据任务类型加载对应的图表数据并渲染图表
      // 例如，使用 ECharts 渲染图表的代码
      // if (task === '入库') {
      //   this.renderRukuEchart(); // 渲染入库任务的图表
      // } else if (task === '出库') {
      //   this.renderChukuEchart(); // 渲染出库任务的图表
      // }
    },

    //解析方法


    //隐藏弹框
    hiddenTan(){
      this.dialogTableVisible = false;
      this.dialogRcu = false;
      this.shezhiDiv = false;
    },

    /** 查看按钮操作 */
    handleUpdate(a,b,row) {
      this.dialogRcu = true;
      if(a === 'gong'){
        this.currentTask = '新建用户';
        this.titleName = row.name+'用户详情';
      }else if(a === 'gongshop'){
        this.currentTask = '新建角色';
        this.titleJue = row.role+'详情';
      }else if(a === 'waringEdit'){
        this.currentTask = '告警规则';
        this.waringTitle = row.name+'告警规则详情';
      }

      // this.kaoqinEcharts()



      // this.reset();
      // const storeId = row.storeId || this.ids
      // getCkxx(storeId).then(response => {
      //   this.form = response.data;
      //   this.open = true;
      // });
    },
    /** 查看按钮操作 */
    delUpdate(a,b,row) {
      this.shezhiDiv = true;
      this.delUser = row.name;

      // this.kaoqinEcharts()



      // this.reset();
      // const storeId = row.storeId || this.ids
      // getCkxx(storeId).then(response => {
      //   this.form = response.data;
      //   this.open = true;
      // });
    },
    kaoqinEcharts(){

      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center',
          textStyle: {
            color: 'white' // 设置图例文本的颜色为红色
          }
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            padAngle: 5,
            itemStyle: {
              borderRadius: 10
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ]
          }
        ]
      };

      this.myChart = echarts.init(document.getElementById("kaoecharts"));
      this.myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });


    },
    getWaringColor(waringji) {
      switch (waringji) {
        case '严重告警':
          return '#E6307B'; // 严重告警的颜色
        case '重要告警':
          return '#ED6942'; // 重要告警的颜色
        case '一般告警':
          return '#0289FF'; // 一般告警的颜色
        default:
          return ''; // 默认颜色
      }
    },


    //图片上传
    beforeUpload(file) {
      const isJpg = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJpg) {
        this.$message.error('上传图片只能是 JPG/PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
      }

      return isJpg && isLt2M;
    },
    // 上传成功的钩子函数
    handleSuccess(response, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      // 在这里你可以处理上传成功后的逻辑，比如保存图片地址等
    },

    //供应商选择不同的按钮
    gongfunction(aaa,bbb){
      this.gongyingshang = aaa;
      this.gongyingshangname = bbb;
    },
  }
};
</script>

<style scoped lang="scss">
.set{
  width: 100%;
  height: 100%;

  :deep(.el-tabs__item) {
    font-size: 1.2rem!important;
    color: white;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
  }
  :deep(.el-tabs__item.is-active) {
    color: #1890ff;
  }
  .el-table, :deep(.el-table tr){
    background-color: transparent!important;
  }
  .el-table thead {
    background-color: transparent;
  }
  :deep(.el-table .el-table__header-wrapper th), :deep(.el-table .el-table__fixed-header-wrapper th) {
    color: white;
  }
  :deep(.el-table th.el-table__cell.is-leaf),  :deep(.el-table td.el-table__cell){
    border-bottom: none;
    color: white;
  }
  :deep(.el-table tr:hover) {
    background-color: transparent !important;
  }
  :deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
    background-color: transparent !important;
  }
  :deep(.el-table::before) {
    height: 0px;
  }
  .contentDiv{
    position: absolute;
    width: 80%;
    left: 18%;
    top: 7%;
    .searchDiv{
      width: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      z-index: 9999;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: space-between;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      margin-top: 3rem;
      .waringStyle{



      }

    }

    .tableList{
      padding: 1rem 0;
      .divSelect{
        display: flex;
        align-items: center;
        justify-content: space-between;
        .bsearchDiv{
          span{
            color: white;
          }
        }
        p{
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 1.1rem;
          color: #0289FF;
          width: 8rem;
        }

      }
      .pagination-container{
        background: transparent;
      }
      :deep(.el-pagination__total){
        color: white;
      }
      :deep(.el-pagination__jump) {
        color:white;
      }
    }
  }


  .h100{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 100%;
    .tanDiv{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      background-color: #081F31;
      z-index: 222;
      opacity: 0.8;
    }
    .diaStyle{
      /* 修改弹框样式 */
      position: relative;
      width: 80rem;
      height: 50rem;
      background-image: url("../../assets/images/total.png");
      background-size: contain; /* 背景图片铺满并保持比例不变 */
      background-repeat: no-repeat; /* 不重复平铺 */
      background-position: center; /* 图片居中对齐 */
      padding: 2rem 3rem;
      margin-top: 2rem;
      z-index: 333;
      :deep(.el-tabs__item) {font-size: 1.2rem!important;color: white; font-family: PingFangSC, PingFang SC;font-weight: 500;}
      :deep(.el-tabs__item.is-active) {color: #1890ff;}
      .xx{
        width: 2rem;
        height: 2rem;
        position: absolute;
        top: 1rem;
        right: -1rem;
        cursor: pointer;
        img{
          width: 100%;
          height: 100%;
        }
      }

      .warningContent{
        padding: 2rem;
        height: 100%;
        color: white;
        .wt{
          height: 10%;
          span{
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            color: #0289FF;
            font-size: 1.5rem;
          }
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
        .wb{
          height: 90%;
          .baseSession{
            display: flex;
            height: 30%;
            .imgDiv{
              flex: 1;
              display: flex;
              align-items: center;
              justify-content: center;
              img{
                width: 18rem;
              }
            }
            .rowDiv{
              padding: 1rem;
              flex: 2;
              .el-row {
                margin-bottom: 1.5rem;
              }
            }
          }

        }
        div{
          .mt10{
            :deep(.el-table thead) {
              background-color: #01B0FF!important;
            }
          }
        }
      }

      .warningContent1{
        padding: 2rem 3rem;
        color: white;
        height: 100%;
        .wt{
          font-family: HYYaKuHei, HYYaKuHei;
          font-weight: normal;
          font-size: 1.5rem;
          color: #FFFFFF;
          display: flex;
          align-items: center;
        }
        .wb{
          height: 80%;
          .baseSession{
            padding: 1rem;
            height: 100%;
            margin-top: 1.5rem;
          }
          .el-row {
            margin-bottom: 2rem;
          }
        }


      }



    }
  }

  .h101{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 100%;
    .tanDiv{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      background-color: #081F31;
      z-index: 222;
      opacity: 0.8;
    }
    .diaStyle{
      /* 修改弹框样式 */
      position: relative;
      width: 71rem;
      height: 43rem;
      background-image: url("../../assets/images/total.png");
      background-size: contain; /* 背景图片铺满并保持比例不变 */
      background-repeat: no-repeat; /* 不重复平铺 */
      background-position: center; /* 图片居中对齐 */
      padding: 2rem 3rem;
      z-index: 333;
      .xx{
        width: 2rem;
        height: 2rem;
        position: absolute;
        top: -1rem;
        right: -1rem;
        cursor: pointer;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .warningContent{
        width: 100%;
        height: 100%;
        padding: 2rem 3rem;
        color: white;
        .wt {
          width: 100%;
          height: 5%;
          display: flex;
          align-items: center;
          .suxian{
            width: 0.3rem;
            height: 1.8rem;
            border-radius: 3px;
            background-color: #1c84c6;
          }
          span{
            font-family: HYYaKuHei, HYYaKuHei;
            font-weight: normal;
            font-size: 1.5rem;
            color: #FFFFFF;
          }
        }

        .wb{
          width: 100%;
          height: 95%;
          .baseSession{
            width: 100%;
            height: 100%;
            margin-top: 1.5rem;
            :deep(.el-form-item__label) {
              color: white;
            }
            .el-radio {
              color: white;
            }
            .avatar-uploader {
              display: inline-block;
              text-align: center;
              border: 1px dashed #d9d9d9;
              border-radius: 6px;
              cursor: pointer;
              overflow: hidden;
            }

            .avatar {
              width: 100px;
              height: 100px;
              display: block;
            }

            .avatar-uploader-icon {
              font-size: 28px;
              color: #8c939d;
            }
          }
        }
      }
    }
  }

  //设置
  .h102{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 100%;
    .tanDiv{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      background-color: #081F31;
      z-index: 222;
      opacity: 0.8;
    }
    .diaStyle{
      /* 修改弹框样式 */
      position: relative;
      width: 35rem;
      height: 21rem;
      background-image: url("../../assets/images/shezhi.png");
      background-size: contain; /* 背景图片铺满并保持比例不变 */
      background-repeat: no-repeat; /* 不重复平铺 */
      background-position: center; /* 图片居中对齐 */
      padding: 1rem 2rem;
      z-index: 333;
      .xx{
        width: 2rem;
        height: 2rem;
        position: absolute;
        top: -1rem;
        right: -1rem;
        cursor: pointer;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .warningContent{
        width: 100%;
        height: 100%;
        padding: 2rem;
        color: white;
        .wt {
          width: 100%;
          height: 5%;
          display: flex;
          align-items: center;
          .suxian{
            width: 0.3rem;
            height: 1.8rem;
            border-radius: 3px;
            background-color: #1c84c6;
          }
          span{
            font-family: HYYaKuHei, HYYaKuHei;
            font-weight: normal;
            font-size: 1.5rem;
            color: #FFFFFF;
          }
        }

        .wb{
          width: 100%;
          height: 95%;
          .baseSession{
            width: 100%;
            height: 100%;
            margin-top: 1.5rem;
            :deep(.el-form-item__label) {
              color: white;
            }
            .el-radio {
              color: white;
            }

          }
        }
      }
    }
  }



}


</style>

